<template>
	<view class="zhuige-block">
		<!-- 用户信息 -->
		<view v-if="topic" class="zhuige-social-poster-blcok">
			<view class="zhuige-social-poster">
				<view v-if="topic.user" class="zhuige-social-poster-avatar" @click="openLink('/pages/user/home/home?user_id=' + topic.user.username)">
					<image mode="aspectFill" :src="topic.user.avatar"></image>
				</view>
				<view class="zhuige-social-poster-info" @click="clickDetail">
					<view>
						<!-- <text v-html="topic.title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
						</text> -->
						
						<text style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							{{topic.title}}
							<!-- <rich-text :nodes="initTitle(topic.title)" ></rich-text> -->
							<!-- <mp-html  :content="initTitle(topic.title)"></mp-html> -->
							<!-- <rich-text nodes="[{"name":"div","attrs":{"style":"overflow:hidden;white-space:nowrap;text-overflow:ellipsis"},"children":[{"type":"text","text":"开源啦 · June 12"}]}]"></rich-text> -->
						</text>
					</view>
					<view>
						<text>{{topic.publishTime}}</text>
					</view>
				</view>
			</view>
			<!-- 右上角出现垃圾箱图标（删除） -->
			<view v-if="trash" class="zhuige-social-opt social-dell">
				<uni-icons type="trash" color="#FF6146" size="16" @click="clickTrashTopic(topic)"></uni-icons>
			</view>
		</view>

		<!-- 话题 + 正文 -->
		<view class="zhuige-social-cont">
			<!-- 标签 -->
			<template v-if="topic && topic.tags.length>0" class="zhuige-social-cont">
				<text v-for="(subject, subjectIndex) in topic.tags" :key="subjectIndex" class="zhuige-social-tag"
					@click="openLink('/pages/bbs/list/list?subject_id=' + subject.id + '&title=' + subject.name)">#{{subject.name}}</text>
			</template>

			<!-- 正文信息 -->
			<template v-if="topic && topic.html" class="zhuige-social-cont">
				<text v-if="topic.stick" class="zhuige-social-top">置顶</text>
				<!-- 暂时注释 文章摘要 -->
				<text @click="clickDetail">{{topic.abstractText}}</text>
			</template>
		</view>

		<!-- 图片信息 -->
		<template v-if="topic.cover">
			<image :src="topic.cover" @click="clickImages(topic.cover)" style="width: 100%;" />
		</template>

		<!-- 地址信息 -->
		<!-- <view v-if="topic.location && topic.location.marker" @click="clickDetail" class="zhuige-social-address">
			<view>
				<uni-icons type="location-filled" size="20"></uni-icons>
				<view>{{topic.location.marker}}</view>
			</view>
		</view> -->

		<!-- 圈子及帖子数据信息 -->
		<view v-if="topic" class="zhuige-social-data">
			<!-- 分类 -->
			<view v-if="topic.sort.name"
				@click="openLink('/pages/bbs/forum/forum?forum_id=' + topic.sort.id)">
				<image mode="aspectFill" src="/static/quan.png"></image>
				<view>{{topic.sort.name}}</view>
			</view>
			<view @click="clickDetail">
				<!-- 点赞数 -->
				<view>
					<uni-icons type="hand-up-filled" size="18"></uni-icons>
					<text>{{topic.likeList.length.toString()}}</text>
				</view>
				<!-- 浏览数  需要更换图标 -->
				<view>
					<uni-icons type="chatboxes-filled" size="18"></uni-icons>
					<text>{{topic.viewsNum}}</text>
				</view>
			</view>
		</view>

		<!-- 帖子回复信息 -->
		<!-- <view v-if="topic && topic.comments.length>0" @click="clickDetail" class="zhuige-social-simple-reply">
			<view v-for="(comment, index) in topic.comments" :key="index">
				<text>{{comment.user.nickname}}</text>
				<text>：<template v-if="comment.reply">@{{comment.reply.nickname}}</template> {{comment.content}}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import Util from '@/utils/util';

	export default {
		name: "zhuige-topic",

		props: {
			prop: {
				type: String,
				default: "prop"
			},
			topic: {
				type: Object,
				default: undefined
			},
			trash: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {};
		},

		methods: {
			openLink(link) {
				Util.openLink(link);
			},
			// 预览图片
			clickImages(cover) {
				let urls = [];
				urls.push(cover);

				uni.previewImage({
					current: 1,
					urls: urls,
				})
			},
			//  跳转文章详情
			clickDetail() {
				Util.openLink('/pages/bbs/detail/detail?topic_id=' + this.topic.id);
			},
			// 删除文章
			clickTrashTopic(topic) {
				this.$emit("deleteTopic", topic);
			},
			initTitle(title) {
				return "<div style='overflow:hidden;white-space:nowrap;text-overflow:ellipsis;'>"+title+"</div>"
			}
		}
	}
</script>

<style>
	/* =========== 9图展示 =========== */
	/*  .zhugie-img {
		display: flex;
		align-items: center;
		position: relative;
		margin: 10rpx 0;
		width: 674rpx;
	}

	.zhugie-img .img-box .img-cover {
		width: 100%;
		height: 100%;
	}

	.one-img .one-img-cover {
		border-radius: 12rpx;
	}

	.two-img {
		justify-content: space-between;
		align-items: center;
	}

	.two-img .img-box-1,
	.two-img .img-box-2 {
		height: 332rpx;
		width: 332rpx;
	}

	.two-img .img-box-1 .img-cover {
		border-radius: 12rpx 0 0 12rpx;
	}

	.two-img .img-box-2 .img-cover {
		border-radius: 0 12rpx 12rpx 0;
	}

	.three-img {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.three-img .img-box-1,
	.three-img .img-box-2,
	.three-img .img-box-3 {
		height: 332rpx;
		width: 332rpx;
	}

	.three-img .img-box-1 {
		height: 446rpx;
		width: 674rpx;
		margin-bottom: 10rpx;
	}

	.three-img .img-box-1 .img-cover {
		border-radius: 12rpx 12rpx 0 0;
	}

	.three-img .img-box-2 .img-cover {
		border-radius: 0 0 0 12rpx;
	}

	.three-img .img-box-3 .img-cover {
		border-radius: 0 0 12rpx 0;
	}

	.four-img {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.four-img .img-box-1,
	.four-img .img-box-2,
	.four-img .img-box-3,
	.four-img .img-box-4 {
		height: 218rpx;
		width: 218rpx;
	}

	.four-img .img-box-1 {
		height: 446rpx;
		width: 674rpx;
		margin-bottom: 10rpx;
	}

	.four-img .img-box-1 .img-cover {
		border-radius: 12rpx 12rpx 0 0;
	}

	.four-img .img-box-2 .img-cover {
		border-radius: 0 0 0 12rpx;
	}

	.four-img .img-box-3 .img-cover {
		border-radius: 0 0 12rpx 0;
	}

	.five-img {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.five-img .img-box-1,
	.five-img .img-box-2,
	.five-img .img-box-3,
	.five-img .img-box-4,
	.five-img .img-box-5 {
		height: 332rpx;
		width: 332rpx;
	}

	.five-img .img-box-1 {
		height: 446rpx;
		width: 446rpx;
		margin-bottom: 10rpx;
	}

	.five-img .img-box-2 {
		height: 218rpx;
		width: 218rpx;
		margin-top: -238rpx;
	}

	.five-img .img-box-3 {
		height: 218rpx;
		width: 218rpx;
		position: absolute;
		right: 0;
		top: 228rpx;
	}

	.five-img .img-box-1 .img-cover {
		border-radius: 12rpx 0 0 0;
	}

	.five-img .img-box-2 .img-cover {
		border-radius: 0 12rpx 0 0;
	}

	.five-img .img-box-4 .img-cover {
		border-radius: 0 0 0 12rpx;
	}

	.five-img .img-box-5 .img-cover {
		border-radius: 0 0 12rpx 0;
	}

	.six-img {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.six-img .img-box-1,
	.six-img .img-box-2,
	.six-img .img-box-3,
	.six-img .img-box-4,
	.six-img .img-box-5,
	.six-img .img-box-6 {
		height: 218rpx;
		width: 218rpx;
	}

	.six-img .img-box-1 {
		height: 446rpx;
		width: 446rpx;
		margin-bottom: 10rpx;
	}

	.six-img .img-box-2 {
		margin-top: -238rpx;
	}

	.six-img .img-box-3 {
		position: absolute;
		right: 0;
		top: 228rpx;
	}

	.six-img .img-box-1 .img-cover {
		border-radius: 12rpx 0 0 0;
	}

	.six-img .img-box-2 .img-cover {
		border-radius: 0 12rpx 0 0;
	}

	.six-img .img-box-4 .img-cover {
		border-radius: 0 0 0 12rpx;
	}

	.six-img .img-box-6 .img-cover {
		border-radius: 0 0 12rpx 0;
	}

	.seven-img {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.seven-img .img-box-1,
	.seven-img .img-box-2,
	.seven-img .img-box-3,
	.seven-img .img-box-4,
	.seven-img .img-box-5,
	.seven-img .img-box-6,
	.seven-img .img-box-7 {
		height: 218rpx;
		width: 218rpx;
		margin-bottom: 10rpx;
	}

	.seven-img .img-box-1 {
		height: 446rpx;
		width: 674rpx;
	}

	.seven-img .img-box-5,
	.seven-img .img-box-6,
	.seven-img .img-box-7 {
		margin: 0;
	}

	.seven-img .img-box-1 .img-cover {
		border-radius: 12rpx 12rpx 0 0;
	}

	.seven-img .img-box-5 .img-cover {
		border-radius: 0 0 0 12rpx;
	}

	.seven-img .img-box-7 .img-cover {
		border-radius: 0 0 12rpx 0;
	}

	.eight-img {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.eight-img .img-box-1,
	.eight-img .img-box-2,
	.eight-img .img-box-3,
	.eight-img .img-box-4,
	.eight-img .img-box-5,
	.eight-img .img-box-6,
	.eight-img .img-box-7,
	.eight-img .img-box-8 {
		height: 218rpx;
		width: 218rpx;
		margin-bottom: 10rpx;
	}

	.eight-img .img-box-6,
	.eight-img .img-box-7,
	.eight-img .img-box-8 {
		margin: 0;
	}

	.eight-img .img-box-1,
	.eight-img .img-box-2 {
		height: 332rpx;
		width: 332rpx;
	}

	.eight-img .img-box-1 .img-cover {
		border-radius: 12rpx 0 0 0;
	}

	.eight-img .img-box-2 .img-cover {
		border-radius: 0 12rpx 0 0;
	}

	.eight-img .img-box-6 .img-cover {
		border-radius: 0 0 0 12rpx;
	}

	.eight-img .img-box-8 .img-cover {
		border-radius: 0 0 12rpx 0;
	}

	.nine-img {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.nine-img .img-box-1,
	.nine-img .img-box-2,
	.nine-img .img-box-3,
	.nine-img .img-box-4,
	.nine-img .img-box-5,
	.nine-img .img-box-6,
	.nine-img .img-box-7,
	.nine-img .img-box-8,
	.nine-img .img-box-9 {
		height: 218rpx;
		width: 218rpx;
		margin-bottom: 10rpx;
	}

	.nine-img .img-box-7,
	.nine-img .img-box-8,
	.nine-img .img-box-9 {
		margin: 0;
	}

	.nine-img .img-box-1 .img-cover {
		border-radius: 12rpx 0 0 0;
	}

	.nine-img .img-box-3 .img-cover {
		border-radius: 0 12rpx 0 0;
	}

	.nine-img .img-box-7 .img-cover {
		border-radius: 0 0 0 12rpx;
	}

	.nine-img .img-box-9 .img-cover {
		border-radius: 0 0 12rpx 0;
	} */
</style>
